<template>
	<div class="cineme_body">
		<ul>
			<li v-for="item in cinemaList" :key="item.id">
				<div>
					<span>{{item.name}}</span>
					<span class="q"><span class="price">{{item.price}}</span>元起</span>
				</div>
				<div class="address">
					<span>{{item.address}}</span>
					<span>{{item.discount}}km</span>
				</div>
				<div class="card">
					<div>小吃</div>
					<div>折扣卡</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
		name:"CiList",
		data(){
			return{
			cinemaList:[],
			}
		},
	created(){
		this.getcinemaData();
	},
	methods:{
		getcinemaData(){
			var that =this;
			axios.get('/mock/cinemaList.json')
			  .then(function (response) {
			    console.log(response);
				if(response.status == 200){
					if(response.data && response.data.cinemaList){
						that.cinemaList=response.data.cinemaList;
					}
				}
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
	}
	}
	}
</script>

<style scoped="scoped">
	.cineme_body{
		flex: 1;
		overflow: auto;
	}
	.cineme_body ul{
		padding: 20px;
	}
	.cineme_body li{
		border-bottom: 1px solid #e6e6e6;
		margin-bottom: 20px;
	}
	.cineme_body div{
		margin-bottom: 10px;
	}
	.cineme_body .q{
		font-size: 11px;
		color: #F03D37;
	}
	.cineme_body .price{
		font-size: 18px; 
	}
	.cineme_body .address{
		font-size: 13px;
		color: #666;
	}
	.cineme_body .address span:nth-of-type(2){
		float: right;
	}
	.cineme_body .card{
		display: flex;
	}
	.cineme_body .card div{
		padding: 0 3px;
		height: 15px;
		line-height: 15px;
		border-radius: 2px;
		color: #f90;
		border: 1px solid #f90;
	}
	.cineme_body .card div .or{
		color: #f90;
		border: 1px solid #f90;
	}
	.cineme_body .card div .bl{
		color: #589daf;
		border: 1px solid#589DAF;
	}
</style>
